<div class="grid-100 row">
    <div class="grid-content grid-100">
        <div class="grid-parent grid-100 container">
            <h1 class="section-label pull-left">Inventory Report</h1>
            <hr>
        </div>

        <form class="grid-100 grid-parent" novalidate name="editForm" ng-submit="editForm.$valid && searchInventories()">
            <div class="grid-parent grid-100 container">
                <div class="grid-50">
                    <div class="grid-parent grid-100 container">
                        <div class="grid-50">
                            <label class="label-input">Customer:</label>
                            <input-validation-message field="customer" form="editForm"></input-validation-message>
                            <organization-auto-complete name="customer" ng-model="search.customerId" on-select="searchUomByCustomerId(org)"
                                                        required="true" ng-if="search.includeUomConversion"
                                                        tag="Customer" allow-clear="true"></organization-auto-complete>
                            <organization-auto-complete name="customer" ng-model="search.customerId" on-select="searchUomByCustomerId(org)"
                                                        tag="Customer" allow-clear="true" ng-if="!search.includeUomConversion"></organization-auto-complete>
                        </div>
                        <div class="grid-50">
                            <label class="label-input">Title:</label>
                            <organization-auto-complete name="title" ng-model="search.titleId" tag="Title" allow-clear="true"></organization-auto-complete>
                        </div>
                    </div>
                    <div class="grid-parent grid-100 container">
                        <div class="grid-50">
                            <label class="label-input">LP:</label>
                            <lt-tags-input placeholder="Enter LP ID" ng-model="search.lpIds" ng-keyup="keyUpSearch($event)"></lt-tags-input>
                        </div>
                        <div class="grid-50">
                            <label class="label-input">SN:</label>
                            <input class="form-control" type="text" ng-model="search.sn" />
                        </div>
                    </div>
                    <div class="grid-parent grid-100 container">
                        <div class="grid-50">
                            <label class="label-input">Order ID:</label>
                            <lt-tags-input placeholder="Enter Order ID" ng-model="search.orderIds" fill="DN-" ng-keyup="keyUpSearch($event)"></lt-tags-input>
                        </div>
                        <div class="grid-50">
                            <label class="label-input">Receipt ID:</label>
                            <lt-tags-input placeholder="Enter Receipt ID" ng-model="search.receiptIds" fill="RN-" ng-keyup="keyUpSearch($event)"></lt-tags-input>
                        </div>
                    </div>
                    <div class="grid-parent grid-100 container">
                        <div class="grid-50">
                            <label class="label-input">Inventory Status:</label>
                            <ui-select name="status" ng-model="search.statuses" multiple>
                                <ui-select-match allow-clear="true">
                                    {{$item}}
                                </ui-select-match>
                                <ui-select-choices repeat="item  in  ['Damage', 'Receiving', 'Available', 'OnHold',
                                'Picked', 'Packed', 'Loaded', 'Shipped'] | filter: $select.search">
                                    {{item}}
                                </ui-select-choices>
                            </ui-select>
                        </div>
                        <div class="grid-50">
                            <label class="label-input">Item Tags:</label>
                            <ui-select name="status" ng-model="search.tags" multiple>
                                <ui-select-match allow-clear="true">
                                    {{$item}}
                                </ui-select-match>
                                <ui-select-choices repeat="item  in  ['Material','Product'] | filter: $select.search">
                                    {{item}}
                                </ui-select-choices>
                            </ui-select>                   
                        </div>
                    </div>
                </div>
                <div class="grid-50">
                    <div class="grid-parent grid-100 container">
                        <label class="label-input">Item:</label>
                        <itemspec-auto-complete ng-model="search.itemSpecId" name="itemSpec" customer-id="search.customerId"
                                                on-select="itemSpecIdOnSelect(search.itemSpecId)" allow-clear="true"/>
                    </div>
                    <div ng-show="diverseFields && diverseFields.length>0" class="grid-parent grid-100 container" style="background-color: rgba(93, 204, 214, 0.188235); padding:15px 25px 5px 5px; margin-bottom: 15px; margin-right:-15px;">
                        <div class="grid-parent grid-100 container" ng-switch on="field.itemProperty.type" ng-repeat="field in diverseFields">
                            <label class="grid-20 " style="padding-top: 7px;margin-bottom: 0; text-align: right;">{{field.itemProperty.name}}:</label>
                            <div class="grid-80">
                                <input-validation-message field="field.{{$index}}.value" form="addItemLineForm"></input-validation-message>
                                <ui-select name="field.{{$index}}.value" ng-model="field.selectedProduct" ng-show="field.availableDiverseValues && field.availableDiverseValues.length>0"
                                    on-select="diverseValuesSelected(field)">
                                    <ui-select-match allow-clear="true">
                                        <div>{{$select.selected.value}} {{$select.selected.unit}}</div>
                                    </ui-select-match>
                                    <ui-select-choices repeat="diverseObj in field.availableDiverseValues | filter: $select.search">
                                        <div>{{diverseObj.value}} {{diverseObj.unit}}</div>
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                        </div>
                    </div>
                    <div class="grid-parent grid-100 container">
                        <div class="grid-50">
                            <label>Include UOM Conversion</label>
                            <md-switch class="md-primary"  style="margin: 0px;"  ng-model="search.includeUomConversion"
                                       aria-label="Include UOM Conversion"></md-switch>
                        </div>
                        <div class="grid-50" ng-if="search.includeUomConversion">
                            <label>Convert To UOM</label>
                            <input-validation-message field="convertToUom" form="editForm"></input-validation-message>
                            <ui-select name="convertToUom" ng-model="search.conversionUOM" ng-required="true">
                                <ui-select-match allow-clear="true">
                                    <div ng-bind="$select.selected"></div>
                                </ui-select-match>
                                <ui-select-choices repeat="item in convertToUomOptions">
                                    {{item}}
                                </ui-select-choices>
                            </ui-select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-parent grid-100 container" >
                <div class="grid-80">&nbsp;</div>
                <div class="grid-10 ">
                    <waitting-btn type="button" btn-class="ripplelink" ng-click="clearQuery()" value="'Clear Query'" ></waitting-btn>
                </div>
                <div class="grid-10">
                    <waitting-btn type="submit" btn-class="ripplelink"  value="'Search'" is-loading="loading"></waitting-btn>
                </div>
            </div>
        </form>
        <div class=" grid-parent grid-100 container">
                <div class="grid-10 ">
                    <waitting-btn type="button" btn-class="ripplelink" ng-click="export()" value="'Export to XLS'" is-loading="exporting"></waitting-btn>
                </div>
                <div class="grid-90 ">
                    &nbsp;
                </div>
            </div>

        <div class=" grid-parent grid-100 container">
            <div class="grid-parent grid-100 container">
                <table class="table-condensed">
                    <thead style="font-size:12px">
                        <tr>
                            <th>Item#</th>
                            <th>Item Description</th>
                            <th>SN</th>
                            <th>QTY</th>
                            <th>Unit</th>
                            <th ng-if="search.includeUomConversion">Converted QTY </th>
                            <th ng-if="search.includeUomConversion">Converted Unit </th>
                            <th>PO No.</th>
                            <th>Container No.</th>
                            <th>Lot No.</th>
                            <th>Pallet No.</th>
                            <th>Expiration Date</th>
                            <th>Mfg Date</th>
                            <th>Shelf Life Days</th>

                            <th>Status</th>
                            <th>Item Status</th>
                            <th>LP</th>
                            <th>Location</th>
                            <th>Location Sequence</th>
                            <th>Customer</th>
                            <th>Title</th>
                            <th>Receipt ID</th>
                            <th>Order ID</th>
                            <!--<th width="200">Actions</th>-->
                        </tr>
                    </thead>
                    <tbody style="font-size:12px">
                        <tr ng-repeat="inventory in inventories track by $index">
                            <td>{{itemSpecMap[inventory.itemSpecId].name}}</td>
                            <td>{{itemSpecMap[inventory.itemSpecId].desc}}</item-display></td>
                            <td>{{inventory.sn}}</td>

                            <td>{{inventory.qty}}</td>
                            <td>{{unitMap[inventory.unitId].name}}</td>
                            <td ng-if="search.includeUomConversion">{{inventory.conversionQty}}</td>
                            <td ng-if="search.includeUomConversion">{{inventory.conversionUOM}}</td>
                            <td>{{inventory.poNo}}</td>
                            <td>{{inventory.containerNo}}</td>
                            <td>{{inventory.lotNo}}</td>
                            <td>{{inventory.palletNo}}</td>
                            <td>{{inventory.expirationDate}}</td>
                            <td>{{inventory.mfgDate}}</td>
                            <td>{{inventory.shelfLifeDays}}</td>
                            <td>{{inventory.status}}</td>
                            <td>{{inventory.itemStatus}}</td>
                            <td>{{inventory.lpId}}</td>
                            <td>{{lpMap[inventory.lpId].location}}</td>
                            <td>{{lpMap[inventory.lpId].locationObject.sequence}}</td>
                            <td>{{inventory.customerName}}</td>
                            <td>{{inventory.titleName}}</td>
                            <td>{{inventory.receiptId}}</td>
                            <td>{{inventory.orderId}}</td>
                            <!--<td style="text-align: center; min-width: 160px">-->
                            <!--<a ng-href="{{'#/wms/inventory/inventory/' + item.id}}" title="View">View</a>-->
                            <!--</td>-->
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="grid-parent grid-100 container">
            <unis-pager total-count="paging.totalCount" current-page ="paging.pageNo" page-size="detail_page_Size" load-content="loadContent(currentPage)"></unis-pager>
        </div>
    </div>
</div>